<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:pou="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:component>

        <pou:layout style="height: 500px">

            <pou:layoutUnit position="west" size="275" header="Notificaciones" 
                            collapsible="true">

                <pou:dataGrid  var="noti" columns="1"
                               emptyMessage="Sin notificaciones nuevas"
                               value="#{sessionController.unreadNotificaciones}">
                    <pou:column>
                        <pou:panel header="#{noti.tituloNotificacion}" closable="true">
                            <pou:ajax event="close" listener="#{sessionController.closeNotification}"/> 
                            <h:panelGrid columns="1">
                                <h:outputText value="#{noti.fechaNotificacion}"  style="font-size: 10px">
                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT-06:00" />
                                </h:outputText>
                                <h:outputText value="#{noti.contenidoNotificacion}"/>
                            </h:panelGrid>
                            <f:attribute name="noti" value="#{noti}" />
                        </pou:panel>
                    </pou:column>
                </pou:dataGrid>

            </pou:layoutUnit>
            <pou:layoutUnit position="center" header="Últimas Visitas" style="min-width: 600px" >


                <pou:gmap center="#{sessionController.centerMap}" zoom="15" 
                          type="ROADMAP" model="#{sessionController.lastVisitPoi}"
                          style="min-width:600px;min-height:450px">  

                    <pou:ajax event="overlaySelect" listener="#{sessionController.onMarkerSelect}" />  

                    <pou:gmapInfoWindow>  
                        <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                            <pou:gmapInfoWindow>  
                                <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                                    <h:outputText value="#{sessionController.selectedMarker.title}"
                                                  style="font-weight: bold"/>
                                    <br />
                                    <h:outputText value="Fecha visita: "/>
                                    <h:outputText value="#{sessionController.selectedMarker.data.visitaPoiPK.fechaVisitaPoi}">
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT-06:00"/>
                                    </h:outputText>
                                    <br />
                                    <h:outputText value="#{sessionController.selectedMarker.data.comentarioVisitaPoi}"/>


                                </pou:outputPanel>  

                            </pou:gmapInfoWindow>  

                        </pou:outputPanel>  

                    </pou:gmapInfoWindow>  
                </pou:gmap>

            </pou:layoutUnit>
        </pou:layout>
    </ui:component>
</html>
